<template>
  <div class="dashboard-container">
    <div class="dashboard-text">管理员: <span style="color: #20a0ff">{{ name }}</span></div>
    <div class="table-box">
      <div class="table-box-title"><i class="el-icon-s-data" /> 数据统计</div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="栏目"
          width="180"
        />
        <el-table-column
          prop="value1"
          label="申报总数"
          width="180"
        />

        <el-table-column
          prop="value2"
          label="审核总数"
        />
        <el-table-column
          prop="value3"
          label="发布总数"
        />

      </el-table>
      <div style="margin: 25px 0px 10px 0px">尊敬的用户您好：</div>
      <div style="line-height:30px;text-indent:35px;">
        欢迎您使用新版信用认证查询系统，新版系统添加了审核发布功能，为了更好的为用户服务，我们加强了审核发布机制，现将审核发布机制做如下说明：
        <br>
        <p style="margin: 0px">每日审核发布时间为三次，审核发布时间为：<br></p>
        <p style="margin: 0px">第一次审核时间是9:00,主要审核前一天及当天9:00前发布的信息。<br></p>
        <p style="margin: 0px">第二次审核时间是13:00,主要审核当天9:00-13:00发布的信息。<br></p>
        <p style="margin: 0px">第三次审核时间是16:30,主要审核当天13:00-16:30发布的信息。<br></p>

        <p style="margin: 0px">如您有紧急的信息需要及时发布公示审核，请您拨打电话：010-68575152与工作人员联系，说明情况及时给您审核发布消息。如给您带来不便，请您谅解。</p>

      </div>
      <div style="float: right;line-height: 30px">
        中国中小企业信息网<br>2020年10月27日</div>
      <div style="float: right">

      </div>
    </div>
    <!--    <v-chart theme="ovilia-green" :options="polar" />-->
    <!--    <v-chart theme="dark" :options="polar1" />-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { findCount } from '@/api/agent'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      polar: {
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
        title: {
          text: '会员数据统计',
          subtext: '动态数据',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          data: ['微信访问', '公众号访问', '扫码进入', '分享进入', '搜索访问']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 1, name: '申报总数' },
              { value: 2, name: '审核总数' },
              { value: 3, name: '发布' },
              { value: 4, name: '分享进入' },
              { value: 5, name: '搜索访问' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      polar1: {
        backgroundColor: '#2c343c',
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: [
            { value: '2014-06-01', name: '微信访问' },
            { value: '2014-06-02', name: '公众号访问' },
            { value: '2014-06-03', name: '扫码进入' },
            { value: '2014-06-04', name: '分享进入' },
            { value: '2014-06-05', name: '搜索访问' }
          ]
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        toolbox: {
          left: 'center',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [{
          startValue: '2014-06-01'
        }, {
          type: 'inside'
        }],
        visualMap: {
          top: 10,
          right: 10,
          pieces: [{
            gt: 0,
            lte: 50,
            color: '#096'
          }, {
            gt: 50,
            lte: 100,
            color: '#ffde33'
          }, {
            gt: 100,
            lte: 150,
            color: '#ff9933'
          }, {
            gt: 150,
            lte: 200,
            color: '#cc0033'
          }, {
            gt: 200,
            lte: 300,
            color: '#660099'
          }, {
            gt: 300,
            color: '#7e0023'
          }],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: 'Beijing AQI',
          type: 'line',
          data: [
            { value: 135, name: '1' },
            { value: 10, name: '2' },
            { value: 324, name: '3' },
            { value: 205, name: '4' },
            { value: 148, name: '5' }
          ],
          markLine: {
            silent: true,
            data: [{
              yAxis: 50
            }, {
              yAxis: 100
            }, {
              yAxis: 150
            }, {
              yAxis: 200
            }, {
              yAxis: 300
            }]
          }
        }
      },
      tableData: [{
        date: '信用',
        value1: '',
        value2: '',
        value3: ''
      }, {
        date: '认证',
        value1: '',
        value2: '',
        value3: ''
      }],
      loaddata: {}
    }
  },
  created() {
    const that = this
    that.loadData()
  },
  methods: {
    loadData() {
      const that = this
      const sendData = { 'id': 1 }
      findCount(sendData).then(response => {
        that.loaddata = response.data
        that.tableData[0].value1 = that.loaddata[0].total
        that.tableData[0].value2 = that.loaddata[1].total
        that.tableData[0].value3 = that.loaddata[2].total
        that.tableData[1].value1 = that.loaddata[3].total
        that.tableData[1].value2 = that.loaddata[4].total
        that.tableData[1].value3 = that.loaddata[5].total
      })
    } }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-text {
    background: #f5f5f5;
    font-size: 25px;
    padding-left: 20px;
    line-height: 46px;
  }
}
.table-box{margin: 20px;padding: 20px;
  .table-box-title{
    color: #2ab4c0;
    font-size: 18px;
    margin-bottom: 15px;
  }
}
</style>
